import React, { useEffect, useState } from 'react'
import { Search, Toast, Tag, } from 'react-vant';
import { LocationO } from '@react-vant/icons';
import './index.css'
import { useNavigate, useLocation } from 'react-router-dom';
import HomedeCenter from '../../components/HomedeCenter/index.tsx'
import HomedeTop from '@/components/HomedeTop'
import { CapsuleTabs } from 'antd-mobile'
import axios from 'axios';
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [date, setDate] = useState([
    '昨天', '今日', '17号', '18号', '19号', '20号'
  ]);
  const [city, setCity] = useState(JSON.parse(localStorage.getItem('city') as string) || { city: '北京市', title: '北京市' });
  const { pathname } = useLocation();
const [imgs, setImgs] = useState([
  '../../src/img/kfxl.gif',
  '../../src/img/xlzx.gif',
  '../../src/img/hlzx.gif',
  '../../src/img/yyys.gif',
  '../../src/img/yyzx.gif'
])
 
  console.log(pathname);
  const [tablist, setTablist] = useState([])
  const [tablist2, setTablist2] = useState([])
  const [tablist3, setTablist3] = useState([])
  const [tablist4, setTablist4] = useState([])
  const [tablist5, setTablist5] = useState([])
  const [searchlist, setSearchlist] = useState([])
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(100);
  const searcList = async () => {
    const res = await axios.get('/api/city', { params: { address: city.city } })
    setSearchlist(res.data)
  }
  const getTablist = async () => {
    const res = await axios.get('/api/date', {
      params: {
        currentPage,
        pageSize
      }
    })
    const { data } = res.data
    setTablist(data.splice(0, 10))
    setTablist2(data.splice(11, 15))
    setTablist3(data.splice(16, 20))
    setTablist4(data.splice(30, 35))
    setTablist5(data.splice(36, 50))
  }
  const imgxq=(indexs:number)=>{
navigate(`/kfxl/${indexs}`)

  }
  useEffect(() => {
    getTablist()
    searcList()
  }, [])
  return (
    <div className='home'>

      <HomedeTop></HomedeTop>

      {/* 中部 */}
      <HomedeCenter></HomedeCenter>
      <div className='zhaoyi'>
        <div className='zhaoyitop'>
          <div className='zhaoyitop1'>
            <img style={{ width: '50px', height: '50px',borderTopLeftRadius:'5px' }} src="../../src/img/niu.png" alt="" />
          </div>
          <div className='zhaoyitop2'>
            <h4 style={{ color: 'blue' }}>找医生</h4> <h4 onClick={() => navigate('/citylist')} style={{ color: 'orange' }}><LocationO  />{city ? <span>{city.city}</span> : '全国'}</h4>
          </div>
        </div>
        <div className='zhaoyibox'>
          <div className="zhaoyicenter">
            <div className='jiuyuan'>
              <img style={{marginTop:'10px'}} src="../../src/img/jiu.png" alt="" />
              <h4 onClick={()=>navigate('/jyzx')}>急救症救援中心&gt;</h4>
            </div>
            <div className='jiuyuanimg'>
              <img src="../../src/img/yylb.gif" alt="" />
              <img src="../../src/img/zhaoyy.gif" alt=""  onClick={()=>navigate('/anyiyuanzhao')}/>
            </div>
          </div>
          <div className='homecitylist'>
            <div className='homecitylistwei'>
              {
                searchlist.length > 0 && searchlist.map((item: any, index: number) => {
                  return <div key={index} className='homecitylistbox'>
                    <div className='homecitylistbox1'>
                      <img src={item.image} alt="" />
                      <div>
                        <p> {item.name}</p>

                        <p> {item.type}</p>
                      </div>
                    </div>
                    <div className='homecitylistbox2'>
                      <p>{item.address
                      } {item.hospital}</p>
                      <p> {item.keshi}</p>
                    </div>
                  </div>
                })
              }
            </div>
          </div>
        </div>


      </div>
      <div className='hlkfyy'>
        <div className='hlkfyytop'>找护理 <b >·</b>康复<b>·</b>营养师</div>
        <div className='hlkfyyimg'>
          {/* <img src="../../src/img/kfxl.gif" alt=""  />
          <img src="../../src/img/xlzx.gif" alt="" />
          <img src="../../src/img/hlzx.gif" alt="" />
          <img src="../../src/img/yyys.gif" alt="" />
          <img src="../../src/img/yyzx.gif" alt="" /> */}
          {
            imgs.map((item: any, index: number) => {
              return <div key={index} className='imgslist'>
               <div> <img  src={item} alt="" onClick={() => imgxq(index)} /></div>
              </div>
            })
          }
        </div>

      </div>
      {/* 空格 */}

      <div className='zbyy'>
        <div className='zbyytop'>
          <div className={'zbyytitle1'} >直播义诊大厅</div><div onClick={() => navigate('/zbyy')} className='zbyytitle2' >查看全部&nbsp; &gt;</div>
        </div>
        <div>
          <CapsuleTabs defaultActiveKey='1'>

            <CapsuleTabs.Tab title='昨天' key='1'>
              <div className='zbyybox1'>
                {
                  tablist.length > 0 && tablist.map((item: any, index: number) => {

                    return <div key={index} className='zbyybox2' onClick={()=> navigate(`/zbyzdetatils/${item.id}`)}>

                      <div className='zbyybox3'>
                        <div> <img src={item.image} alt="" /></div>
                        <div>
                          <p> {item.keshi}</p>
                          <p> {item.name}</p>
                          {item.type}
                        </div>
                      </div>

                      <p>  {item.hospital}</p>
                      {item.shanc}

                    </div>
                  })
                }
              </div>
            </CapsuleTabs.Tab>
            <CapsuleTabs.Tab title='今日' key='2'>
              <div className='zbyybox1'>
                {
                  tablist2.length > 0 && tablist2.map((item: any, index: number) => {

                    return <div key={index} className='zbyybox2' onClick={()=> navigate(`/zbyzdetatils/${item.id}`)}>

                      <div className='zbyybox3'>
                        <div> <img src={item.image} alt="" /></div>
                        <div>
                          <p> {item.keshi}</p>
                          <p> {item.name}</p>
                          {item.type}
                        </div>
                      </div>

                      <p>  {item.hospital}</p>
                      {item.shanc}

                    </div>
                  })
                }
              </div>
            </CapsuleTabs.Tab>
            <CapsuleTabs.Tab title='17号' key='3'>
              <div className='zbyybox1'>
                {
                  tablist3.length > 0 && tablist3.map((item: any, index: number) => {

                    return <div key={index} className='zbyybox2' onClick={()=> navigate(`/zbyzdetatils/${item.id}`)}>

                      <div className='zbyybox3'>
                        <div> <img src={item.image} alt="" /></div>
                        <div>
                          <p> {item.keshi}</p>
                          <p> {item.name}</p>
                          {item.type}
                        </div>
                      </div>

                      <p>  {item.hospital}</p>
                      {item.shanc}

                    </div>
                  })
                }
              </div>
            </CapsuleTabs.Tab>
            <CapsuleTabs.Tab title='18号' key='4'>
              <div className='zbyybox1'>
                {
                  tablist4.length > 0 && tablist4.map((item: any, index: number) => {

                    return <div key={index} className='zbyybox2' onClick={()=> navigate(`/zbyzdetatils/${item.id}`)}>

                      <div className='zbyybox3'>
                        <div> <img src={item.image} alt="" /></div>
                        <div>
                          <p> {item.keshi}</p>
                          <p> {item.name}</p>
                          {item.type}
                        </div>
                      </div>

                      <p>  {item.hospital}</p>
                      {item.shanc}

                    </div>
                  })
                }
              </div>
            </CapsuleTabs.Tab>
            <CapsuleTabs.Tab title='19号' key='5'>
              <div className='zbyybox1'>
                {
                  tablist2.length > 0 && tablist2.map((item: any, index: number) => {

                    return <div key={index} className='zbyybox2' onClick={()=> navigate(`/zbyzdetatils/${item.id}`)}>

                      <div className='zbyybox3'>
                        <div> <img src={item.image} alt="" /></div>
                        <div>
                          <p> {item.keshi}</p>
                          <p> {item.name}</p>
                          {item.type}
                        </div>
                      </div>

                      <p>  {item.hospital}</p>
                      {item.shanc}

                    </div>
                  })
                }
              </div>
            </CapsuleTabs.Tab>
            <CapsuleTabs.Tab title='20号' key='6'>
              <div className='zbyybox1'>
                {
                  tablist.length > 0 && tablist.map((item: any, index: number) => {

                    return <div key={index} className='zbyybox2' onClick={()=> navigate(`/zbyzdetatils/${item.id}`)}>

                      <div className='zbyybox3'>
                        <div> <img src={item.image} alt="" /></div>
                        <div>
                          <p> {item.keshi}</p>
                          <p> {item.name}</p>
                          {item.type}
                        </div>
                      </div>

                      <p>  {item.hospital}</p>
                      {item.shanc}

                    </div>
                  })
                }
              </div>
            </CapsuleTabs.Tab>

          </CapsuleTabs>
        </div>
      </div>
    </div>
  )
}

export default Index
